<script setup>
import { ref } from 'vue'
import { Icon } from 'vant'

defineProps({
  gameTag: String,
  data: Array,
})

const winNumber = ref()

const list = ref([
  { name: '虎', number: '10' },
  { name: '龙', number: '49' },
  { name: '狗', number: '01' },
  { name: '兔', number: '08' },
  { name: '虎', number: '32' },
  { name: '虎', number: '21' },
  { name: '虎', number: '18' },
])
</script>
<template>
  <div class="scratch-popup flex-column" ref="scratchPopup">
    <Icon name="cross" color="white" class="close" size="20" />
    <img src="@/assets/scratch/title.png" class="title" alt="" />
    <img src="@/assets/scratch/sub-title.png" class="sub-title" alt="" />
    <div class="number-box" ref="numberBox">
      <div class="item-box row-space-around" ref="winNumber">
        <div class="item column-center all-center" v-for="item in list" :key="item.number">
          <span class="number all-center">{{ item.number }}</span>
          <span class="text all-center">{{ item.text }}</span>
        </div>
      </div>
      <div class="mark"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.scratch-popup {
  box-sizing: border-box;
  position: relative;
  width: 300px;
  border-radius: 20px;
  box-shadow: 0 0 32px 0 #69111126 inset;
  border: 1px solid #ffffff80;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(
        48.16% 32.59% at 106.66% 56.28%,
        rgba(160, 0, 0, 0.5) 0%,
        rgba(255, 0, 0, 0) 100%,
        rgba(255, 194, 194, 0) 100%
      )
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
    linear-gradient(180deg, #ff5656 0%, #e72323 79.41%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    radial-gradient(49.58% 29.44% at -12.32% -0.99%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

  &::after {
    content: ''; /* 必须设置 content 属性 */
    position: absolute;
    width: 100%;
    height: 100%;
    top: -10px;
    border: 1px solid white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .close {
    position: absolute;
    right: 12px;
    top: 12px;
  }

  .title {
    width: 248.24px;
    height: 45.87px;
  }
  .sub-title {
    margin-top: 15px;
    width: 250px;
    height: 53px;
  }

  .number-box {
    position: relative;
    font-weight: 600;
    margin: 30px 0 30px 0;
    border-radius: 12px;

    .mark {
      z-index: 1;
      position: absolute;
      top: -15px;
      left: 0;
      width: 100%;
      height: 200px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background: linear-gradient(180deg, rgba(255, 166, 147, 0.35) 40.13%, rgba(255, 224, 217, 0) 66.95%);
    }

    .item-box {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      margin: 0 25px;
      background: white;
      border-radius: 20px;
      padding-bottom: 28px;

      &::after {
        content: '';
        position: absolute;
        border: 1px solid #c2e8ff;
        border-radius: 20px;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
      }
      .item {
        margin-top: 30px;
        margin-left: 10px;
        margin-right: 10px;

        .number {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          border: 4px solid #c2e8ff;
          color: #008ddc;
          font-size: 24px;
        }
        .text {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
